import "./index.scss"
import {View, Text, Image, Button, Input} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {AtButton, AtSegmentedControl} from "taro-ui"
import {selectRainControlDataApi, sendSwitchApi} from "@/api/rainControl"
import {getStorage} from "@/utils/localstoreage"

const RainControl = () => {
	let router = useRouter()

	// devGId
	const [devGId, setDevGId] = useState("")

	// devId
	const [devId, setDevId] = useState("")

	// 北侧雨水和南侧雨水标识
	const [rainFlag, setRainFlag] = useState(0)

	// 间隔时间
	const [intervalTime, setIntervalTime] = useState(0)

	// 液位界限
	const [ywLimit, setYwLimit] = useState(0)

	// 切换北侧雨水和南侧雨水
	const checkRainFlag = flag => {
		setRainFlag(flag)
	}

	// 间隔时间的Input事件
	const intervalTimeInput = e => {
		console.log(e.detail.value)
		setIntervalTime(e.detail.value)
	}

	// 液位界限的Input事件
	const ywLimitInput = e => {
		console.log(e.detail.value)
		setYwLimit(e.detail.value)
	}

	// 保存点击事件
	const saveClick = async () => {
		let userId = getStorage("userId")
		let data = {
			devGId,
			userId,
			data: `0,${rainFlag},${intervalTime},${ywLimit}`
		}

		console.log("保存", data)
		Taro.showLoading({
			title: "保存中",
			mask: true
		})
		await sendSwitchApi(data)
			.then(res => {
				console.log("保存res", res)

				if (res.result == "success") {
					Taro.showToast({
						title: "保存成功",
						icon: "none",
						mask: true,
						duration: 1500
					})
					// selectRainControlDataFunc()
				} else if (res.result == "error") {
					Taro.showToast({
						title: "保存失败",
						icon: "none",
						mask: true,
						duration: 1500
					})
				}
			})
			.catch(err => {
				console.log("保存err", err)
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	// 查询
	const selectRainControlDataFunc = async () => {
		let data = {
			devId: Number(router.params.devId)
		}
		console.log("查询雨水参数", data)

		Taro.showLoading({
			title: "加载中",
			mask: true
		})
		await selectRainControlDataApi(data)
			.then(res => {
				console.log("雨水数据", res)

				// 处理数据
				setRainFlag(res.data.collectType)
				setYwLimit(res.data.ywLimit)
				setIntervalTime(res.data.intervalTime)
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	useEffect(() => {
		console.log(Number(router.params.devId))
		setDevGId(router.params.devGId)
		setDevId(Number(router.params.devId))
		selectRainControlDataFunc()
	}, [])

	/* 数据  -------------------------------------------------------------------------- */

	return (
		<View className="rain_control_wrap">
			<View className="hanzi text-16 font-bold mt-14 mb-14 px-16">雨水控制</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-16">
				您可以对设备进行雨水相关控制
			</View>
			<View
				style={{
					paddingLeft: 20,
					paddingRight: 20
				}}
			>
				{/* <View className="title_box">
					<Text>模式选择</Text>
				</View> */}
				{/* 污水和雨水切换 */}
				{/* 雨水 */}
				<View
					className="yw_select_item_box"
					onClick={() => {
						checkRainFlag(2)
					}}
				>
					<Image
						className="icon_img"
						src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/ys_icon.png"
					></Image>
					<Text className="label_text">北侧雨水</Text>
					{rainFlag == 2 ? (
						<Image
							className="jb_img"
							src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/jb.png"
						></Image>
					) : null}
				</View>
				{/* 污水 */}
				<View
					className="yw_select_item_box"
					onClick={() => {
						checkRainFlag(1)
					}}
				>
					<Image
						className="icon_img"
						src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/ys_icon.png"
					></Image>
					<Text className="label_text">南侧雨水</Text>
					{rainFlag == 1 ? (
						<Image
							className="jb_img"
							src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/jb.png"
						></Image>
					) : null}
				</View>
			</View>

			{/* 量值设置 */}
			<View className="auto_mode_box">
				<View className="auto_set_item">
					<Text className="label_text">间隔时间：</Text>
					<Input
						className="h-full px-8 py-10 bg-white rounded-4"
						style="width:160px;"
						type="digit"
						placeholder="请输入间隔时间"
						value={intervalTime}
						onInput={e => {
							intervalTimeInput(e)
						}}
					/>
					<Text className="unit_text">分钟</Text>
				</View>
				<View className="auto_set_item">
					<Text className="label_text">液位界限：</Text>
					<Input
						className="h-full px-8  py-10 bg-white rounded-4"
						style="width:160px;"
						type="digit"
						placeholder="请输入界限值"
						value={ywLimit}
						onInput={e => {
							ywLimitInput(e)
						}}
					/>
				</View>
			</View>

			<View className="btn_box">
				<AtButton type="primary" className="save_btn" onClick={saveClick}>
					保存
				</AtButton>
			</View>
		</View>
	)
}
export default observer(RainControl)
